// 加载 JSON 数据
fetch('task.json')
  .then(res => res.json())
  .then(data => {
    renderPlaylist(data.playlist);
    renderSongList(data.songlist);
    renderMVList(data.mvlist);
  })
  .catch(err => console.error("加载数据失败:", err));

// 渲染歌单推荐
function renderPlaylist(playlist) {
  const container = document.querySelector('.playlist-grid');
  playlist.forEach(item => {
    const card = document.createElement('div');
    card.className = 'playlist-card';
    card.innerHTML = `
      <img src="${item.cover}" alt="${item.title}">
      <div class="playlist-info">
        <div class="title">${item.title}</div>
        <div class="listen-num">播放量: ${formatNumber(item.listen_num)}</div>
      </div>
    `;
    container.appendChild(card);
  });
}

// 渲染新歌首发
function renderSongList(songlist) {
  const container = document.querySelector('.songlist-grid');
  songlist.forEach(song => {
    const card = document.createElement('div');
    card.className = 'song-card';
    card.innerHTML = `
      <img src="${song.cover}" alt="${song.name}">
      <div class="song-info">
        <div class="name">${song.name}</div>
        <div class="singer">${song.singer.join(', ')}</div>
      </div>
      <div class="song-duration">${formatDuration(song.interval)}</div>
    `;
    container.appendChild(card);
  });
}

// 渲染 MV 列表
function renderMVList(mvlist) {
  const container = document.querySelector('.mv-grid');
  mvlist.forEach(mv => {
    const card = document.createElement('div');
    card.className = 'mv-card';
    card.innerHTML = `
      <img src="${mv.cover}" alt="${mv.title}">
      <div class="mv-info">
        <div class="title">${mv.title}</div>
        <div class="singer">${mv.singer}</div>
        <div class="listen-num">▶ ${formatNumber(mv.listen_num)}万</div>
      </div>
    `;
    container.appendChild(card);
  });
}

// 格式化数字（如 123456 → 123.4万）
function formatNumber(num) {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万';
  }
  return num.toString();
}

// 格式化秒数为 MM:SS
function formatDuration(seconds) {
  const mins = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${mins}:${secs < 10 ? '0' : ''}${secs}`;
}